<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3376143" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xeca8;</span>
                <div class="name">疾病</div>
                <div class="code-name">&amp;#xeca8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">话筒</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">xinnaoxueguan</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">心脏病</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">糖尿病</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">高血压</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">身体状况</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">药丸</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">用户头像-女</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">用户头像-男</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-jibing"></span>
            <div class="name">
              疾病
            </div>
            <div class="code-name">.icon-jibing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huatong"></span>
            <div class="name">
              话筒
            </div>
            <div class="code-name">.icon-huatong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinnaoxieguan"></span>
            <div class="name">
              xinnaoxueguan
            </div>
            <div class="code-name">.icon-xinnaoxieguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzhangbingbeifen"></span>
            <div class="name">
              心脏病
            </div>
            <div class="code-name">.icon-xinzhangbingbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tangniaobing"></span>
            <div class="name">
              糖尿病
            </div>
            <div class="code-name">.icon-tangniaobing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaoxieya"></span>
            <div class="name">
              高血压
            </div>
            <div class="code-name">.icon-gaoxieya
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shentizhuangkuang"></span>
            <div class="name">
              身体状况
            </div>
            <div class="code-name">.icon-shentizhuangkuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              药丸
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nv_9"></span>
            <div class="name">
              用户头像-女
            </div>
            <div class="code-name">.icon-nv_9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nan_5"></span>
            <div class="name">
              用户头像-男
            </div>
            <div class="code-name">.icon-nan_5
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jibing"></use>
                </svg>
                <div class="name">疾病</div>
                <div class="code-name">#icon-jibing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icon-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huatong"></use>
                </svg>
                <div class="name">话筒</div>
                <div class="code-name">#icon-huatong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinnaoxieguan"></use>
                </svg>
                <div class="name">xinnaoxueguan</div>
                <div class="code-name">#icon-xinnaoxieguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzhangbingbeifen"></use>
                </svg>
                <div class="name">心脏病</div>
                <div class="code-name">#icon-xinzhangbingbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tangniaobing"></use>
                </svg>
                <div class="name">糖尿病</div>
                <div class="code-name">#icon-tangniaobing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaoxieya"></use>
                </svg>
                <div class="name">高血压</div>
                <div class="code-name">#icon-gaoxieya</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shentizhuangkuang"></use>
                </svg>
                <div class="name">身体状况</div>
                <div class="code-name">#icon-shentizhuangkuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">药丸</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nv_9"></use>
                </svg>
                <div class="name">用户头像-女</div>
                <div class="code-name">#icon-nv_9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nan_5"></use>
                </svg>
                <div class="name">用户头像-男</div>
                <div class="code-name">#icon-nan_5</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
